Getting started

Learn how to get started with Hooks SDK

Independent Usage

If you want to use this package without @0xsequence/connect, you can do so by following the steps below.

1. Install the required libraries

       npm install @0xsequence/hooks @tanstack/react-query wagmi
       # or
       pnpm install @0xsequence/hooks @tanstack/react-query wagmi
       # or
       yarn add @0xsequence/hooks @tanstack/react-query wagmi
   
2. Get a project access key

   Get your project access key from the Sequence Builder.

3. Wrap your App with the required providers

   [config.ts]

   import { mainnet, polygon } from "wagmi/chains"
   import { createConfig, http } from "wagmi"
   import { QueryClient } from "@tanstack/react-query"
   
   const wagmiConfig = createConfig({
     chains: [mainnet, polygon],
     transports: {
       [mainnet.id]: http('https://mainnet.example.com'),
       [polygon.id]: http('https://polygon.example.com'),
     },
   })
   
   const queryClient = new QueryClient()
   
   export { wagmiConfig, queryClient }
   

   [main.tsx]

   import React from "react";
   import ReactDOM from "react-dom/client";
   import "./index.css";
   
   import App from "./App";
   import { SequenceHooksProvider } from "@0xsequence/hooks";
   import { WagmiProvider } from "wagmi";
   import { queryClient, wagmiConfig } from "./config";
   import { QueryClientProvider } from "@tanstack/react-query";
   
   function Dapp() {
     return (
       <WagmiProvider config={wagmiConfig}>
         <QueryClientProvider client={queryClient}>
           <SequenceHooksProvider config={{ projectAccessKey: "AQAAAAAAAJbd_5JOcE50AqglZCtvu51YlGI" }}>
             <App />
           </SequenceHooksProvider>
         </QueryClientProvider>
       </WagmiProvider>
      
     );
   }
   
   ReactDOM.createRoot(document.getElementById("root")!).render(
     <React.StrictMode>
       <Dapp />
     </React.StrictMode>
   );
   
   export default Dapp;
   
4. Start using it

   Now you can start using hooks like useGetCoinPrices.

With Connect SDK

If you want to use this pacakge with @0xsequence/connect, you can do so by following the steps below.

1. Install and setup Connect SDK

   Follow the steps here.

2. Install Hooks SDK

       npm install @0xsequence/hooks
       # or
       pnpm install @0xsequence/hooks
       # or
       yarn add @0xsequence/hooks  
   
3. Wrap your App with the SequenceHooksProvider

   [main.tsx]

       import React from "react";
       import ReactDOM from "react-dom/client";
       import "./index.css";
   
       import App from "./App";
       import { config } from "./config";
       import { SequenceConnect } from "@0xsequence/connect";
       import { SequenceHooksProvider } from "@0xsequence/hooks";
   
       function Dapp() {
           return (
               <SequenceConnect config={config}>
                   <SequenceHooksProvider config={config.connectConfig}>
                       <App />
                   </SequenceHooksProvider>
               </SequenceConnect>
           );
       }
   
       ReactDOM.createRoot(document.getElementById("root")!).render(
           <React.StrictMode>
               <Dapp />
           </React.StrictMode>
       );
   
       export default Dapp;
   
4. Start using it

   Now you can start using hooks like useGetCoinPrices.